<template>
  <div class="min-h-screen bg-gray-50 p-4 md:p-6 lg:p-8">
    <div class="max-w-4xl mx-auto">
      <a-card title="日期计算器" class="mb-4">
        <a-tabs v-model:activeKey="activeTab">
          <!-- 日期间隔计算 -->
          <a-tab-pane key="interval" tab="日期间隔">
            <div class="space-y-4">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
                  <a-date-picker
                    v-model:value="startDate"
                    style="width: 100%"
                    @change="calculateInterval"
                  />
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">结束日期</label>
                  <a-date-picker
                    v-model:value="endDate"
                    style="width: 100%"
                    @change="calculateInterval"
                  />
                </div>
              </div>

              <div v-if="intervalResult" class="bg-gray-50 p-4 rounded-lg">
                <h4 class="font-medium mb-2">计算结果：</h4>
                <div class="space-y-2 text-gray-600">
                  <p>相差天数：{{ intervalResult.days }} 天</p>
                  <p>相差周数：{{ intervalResult.weeks }} 周</p>
                  <p>相差月数：{{ intervalResult.months }} 个月</p>
                  <p>相差年数：{{ intervalResult.years }} 年</p>
                </div>
              </div>
            </div>
          </a-tab-pane>

          <!-- 日期加减计算 -->
          <a-tab-pane key="add" tab="日期加减">
            <div class="space-y-4">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">基准日期</label>
                  <a-date-picker
                    v-model:value="baseDate"
                    style="width: 100%"
                    @change="calculateAddSub"
                  />
                </div>
                <div class="space-y-2">
                  <label class="block text-sm font-medium text-gray-700">增减数值</label>
                  <div class="flex space-x-2">
                    <a-input-number
                      v-model:value="addValue"
                      style="width: 120px"
                      @change="calculateAddSub"
                    />
                    <a-select
                      v-model:value="addUnit"
                      style="width: 100px"
                      @change="calculateAddSub"
                    >
                      <a-select-option value="days">天</a-select-option>
                      <a-select-option value="weeks">周</a-select-option>
                      <a-select-option value="months">月</a-select-option>
                      <a-select-option value="years">年</a-select-option>
                    </a-select>
                  </div>
                </div>
              </div>

              <div v-if="addSubResult" class="bg-gray-50 p-4 rounded-lg">
                <h4 class="font-medium mb-2">计算结果：</h4>
                <div class="space-y-2 text-gray-600">
                  <p>计算后的日期：{{ addSubResult }}</p>
                  <p>是{{ getDayOfWeek(addSubResult) }}</p>
                </div>
              </div>
            </div>
          </a-tab-pane>

          <!-- 工作日计算 -->
          <a-tab-pane key="workday" tab="工作日计算">
            <div class="space-y-4">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
                  <a-date-picker
                    v-model:value="workdayStartDate"
                    style="width: 100%"
                    @change="calculateWorkdays"
                  />
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">结束日期</label>
                  <a-date-picker
                    v-model:value="workdayEndDate"
                    style="width: 100%"
                    @change="calculateWorkdays"
                  />
                </div>
              </div>

              <div class="flex items-center space-x-2">
                <a-checkbox v-model:checked="excludeHolidays">排除节假日</a-checkbox>
                <a-tooltip title="目前仅支持排除周六日，节假日数据需要手动维护">
                  <question-circle-outlined />
                </a-tooltip>
              </div>

              <div v-if="workdayResult" class="bg-gray-50 p-4 rounded-lg">
                <h4 class="font-medium mb-2">计算结果：</h4>
                <div class="space-y-2 text-gray-600">
                  <p>工作日天数：{{ workdayResult.workdays }} 天</p>
                  <p>休息日天数：{{ workdayResult.restdays }} 天</p>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-card>

      <!-- 使用说明 -->
      <a-card title="使用说明" class="mb-4">
        <ol class="list-decimal list-inside space-y-2 text-gray-600">
          <li>日期间隔：计算两个日期之间的天数、周数、月数和年数</li>
          <li>日期加减：在指定日期上加减天数、周数、月数或年数</li>
          <li>工作日计算：计算指定日期范围内的工作日数量</li>
          <li>支持排除周末和节假日（节假日数据需要手动维护）</li>
        </ol>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import dayjs, { Dayjs } from 'dayjs'

// 标签页
const activeTab = ref('interval')

// 日期间隔计算
const startDate = ref<Dayjs>()
const endDate = ref<Dayjs>()
const intervalResult = ref<{
  days: number
  weeks: number
  months: number
  years: number
} | null>(null)

const calculateInterval = () => {
  if (!startDate.value || !endDate.value) return

  const start = dayjs(startDate.value)
  const end = dayjs(endDate.value)
  const days = end.diff(start, 'day')
  
  intervalResult.value = {
    days,
    weeks: Math.floor(days / 7),
    months: end.diff(start, 'month'),
    years: end.diff(start, 'year')
  }
}

// 日期加减计算
const baseDate = ref<Dayjs>()
const addValue = ref(1)
const addUnit = ref('days')
const addSubResult = ref('')

const calculateAddSub = () => {
  if (!baseDate.value || !addValue.value) return

  const date = dayjs(baseDate.value)
  const result = date.add(addValue.value, addUnit.value as any)
  addSubResult.value = result.format('YYYY-MM-DD')
}

// 工作日计算
const workdayStartDate = ref<Dayjs>()
const workdayEndDate = ref<Dayjs>()
const excludeHolidays = ref(true)
const workdayResult = ref<{
  workdays: number
  restdays: number
} | null>(null)

const calculateWorkdays = () => {
  if (!workdayStartDate.value || !workdayEndDate.value) return

  const start = dayjs(workdayStartDate.value)
  const end = dayjs(workdayEndDate.value)
  const totalDays = end.diff(start, 'day') + 1
  let restdays = 0

  if (excludeHolidays.value) {
    let current = start
    while (current.isBefore(end) || current.isSame(end)) {
      // 周六或周日
      if (current.day() === 0 || current.day() === 6) {
        restdays++
      }
      current = current.add(1, 'day')
    }
  }

  workdayResult.value = {
    workdays: totalDays - restdays,
    restdays
  }
}

// 获取星期几
const getDayOfWeek = (dateStr: string) => {
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const date = dayjs(dateStr)
  return weekdays[date.day()]
}
</script> 